<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="myTags" tagdir="/WEB-INF/tags/components" %>
<%@ page import="data.UserDB" %>

<!-- Author: Myles Dale -->

<h3>Edit Profile: ${user.userName }</h3>
<span id="profdivide"><img src="images/profile-divide.png"/></span> <br />
<img id="profilePicture" src="${user.picturePath }" /> 
<a href="Albums">Albums</a>
	
<div id="updateForm">
<form id="update" action="UpdateProfile" method="post">
	<input type="hidden" name="userID" value="${user.userID }" />
	<div style="width:500px;">
		<div class="floatLeft"><label for="firstName">First Name:</label></div>
		<div class="floatRight"><input required="required" type="text" name="firstName" value="${user.firstName }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="lastName">Last Name:</label></div>
		<div class="floatRight"><input required="required" type="text" name="lastName" value="${user.lastName }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="userName">User Name:</label></div>
		<div class="floatRight"><input required="required" type="text" name="userName" value="${user.userName}" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="email">Email:</label></div>
		<div class="floatRight"><input required="required" type="email" name="email" value="${user.email }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="password">Password:</label></div>
		<div class="floatRight"><input required="required" minlength="5" type="password" name="passwordr" equalTo="#passwordr" value="${user.password }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="passwordr">Retype Your Password:</label></div>
		<div class="floatRight"><input required="required" minlength="5" type="password" name="password" value="${user.password }" /></div><br style="clear:both" />
		<div class="floatLeft"><label>Birthday:</label></div>
	
		<div class="floatRight">
		<label for="dobMonth">Month:</label>
		<select  name="dobMonth">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
		</select>
		<label for="dobDay">Day:</label>
		<select required="required" name="dobDay">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
		</select>
		<label for="dobYear">Year:</label>
		<input required="required" type="text" name="dobYear" />
		</div><br style="clear:both;" 	 />
		<label for="gender">Gender:</label>
		<div class="floatRight">
		<select required="required" name="gender">
			<option value="true">Male</option>
			<option value="false">Female</option>
		</select></div>	<br style="clear:both;" />
		<div class="floatLeft"><label for="phone">Phone:</label></div>
		<div class="floatRight"><input required="required" type="tel"  name="phone" value="${user.phone }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="address1">Address 1:</label></div>
		<div class="floatRight"><input required="required" type="text" name="address1" value="${user.address1 }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="address2">Address 2:</label></div>
		<div class="floatRight"><input type="text" name="address2" /></div><br style="clear:both" value="${user.address2 }" />
		<div class="floatLeft"><label for="city">City:</label></div>
		<div class="floatRight"><input required="required" type="text" name="city" value="${user.city }" /></div><br style="clear:both" />
		<div class="floatLeft"><label for="state">State:</label></div>
		<div class="floatRight">
		<select required="required" name="state">
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select></div><br style="clear:both"  />
		<div class="floatLeft"><label for="zip">Zip:</label>
		</div>
		<div class="floatRight"><input type="number"  name="zip" required="required" value="${user.zip }" /></div><br style="clear:both" />
		<input type="submit" name="submit" value="Update" />
		</div>
	</form>
</div>